<!--
 * @Author: Olivia
 * @Date: 2022-07-20 23:14:26
 * @LastEditTime: 2022-08-21 10:31:11
 * @FilePath: \toutiao-m\src\views\home\components\channel-edit.vue
 * @custom_string_Olivia: Less is more
-->
<template>
 <div class="channel-edit">
    <van-cell title="我的频道" :border="false" class="title-text">
        <van-button type="danger" round size="mini" plain class="edit-btn" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :column-num="4" class="my-grid">
        <van-grid-item v-for="(value,index) in myChannels" :key="index" :text="value.name" class="grid-item" @click="onMyChannelsClick(value,index)">
        <van-icon v-show="isEdit && !fixChannels.includes(value.id)" slot="icon" name="clear"></van-icon>
            <!-- TODO: -->
            <span class="text" :class="{active:active===index}" slot="text">{{value.name}}</span>
        </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" :border="false" class="title-text">
    </van-cell>
    <van-grid :column-num="4" class="recommend-grid">
        <van-grid-item icon="plus" v-for="(channels,index) in recmmendChannels" :key="index" :text="channels.name" class="grid-item" @click="onAddChannel(channels)" />
    </van-grid>
 </div>
</template>
<script>
import { getChannels, addUserChannels, deleteUserChannels } from '../../../api/channels'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'channelEdit',
  data () {
    return {
      allChannels: [],
      isEdit: false, // 是否编辑状态
      fixChannels: [0] // 固定频道
    }
  },
  created () {
    this.loadChannels()
  },
  computed: {
    ...mapState(['user']),
    recmmendChannels () {
    // 方法一：
    //   return this.allChannels.filter(item => !this.myChannels.includes(item))
    //   方法二：
      return this.allChannels.filter(item => {
        return !this.myChannels.find(myChannel => {
          return myChannel.id === item.id
        })
      })
    // 方法三：
    //   const channels = []
    //   this.allChannels.forEach(channel => {
    //     const ret = this.myChannels.find(myChannel => {
    //       return myChannel.id === channel.id
    //     })
    //     if (!ret) {
    //       channels.push(channel)
    //     }
    //   })
    //   return channels
    }
  },
  methods: {
    async loadChannels () {
      try {
        const { data } = await getChannels()
        this.allChannels = data.data.channels
      } catch (error) {
        console.log(error)
      }
    },
    async onAddChannel (channel) {
      this.myChannels.push(channel)
      if (this.user) {
        // 登录状态，线上存储
        try {
          await addUserChannels({
            id: channel.id, // id
            seq: this.myChannels.length // 序号
          })
        } catch (error) {
          this.$toast('请求失败，请稍后重试')
        }
      } else {
        // 未登录状态，存储本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    onMyChannelsClick (mychannel, index) {
      if (this.isEdit) {
        // 固定频道不能删除
        if (this.fixChannels.includes(mychannel.id)) {
          this.$toast('固定频道不能删除')
          return
        }
        // 编辑状态，执行删除频道操作
        this.myChannels.splice(index, 1)
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        // 处理持久化
        this.deleteChannels(mychannel)
      } else {
        // 非编辑状态，执行切换频道
        this.$emit('update-active', index)
      }
    },
    async deleteChannels (mychannel) {
      if (this.user) {
        try {
          await deleteUserChannels(mychannel.id)
        } catch (error) {
          this.$toast('请求失败，请稍后重试', error)
        }
      } else {
        // 未登录状态，存储本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    }
  },
  props: {
    myChannels: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang='less'  scoped>
.channel-edit{
    padding: 85px/2 0;
    .title-text{
        font-size: 32px/2;
        color: #333;
    }
    .edit-btn{
        width: 104px/2;
        height: 48px/2;
        font-size: 26px/2;
        color: #f85959;
        border: 1px solid #f85959;
    }
    .grid-item{
        width: 160px/2;
        height: 86px/2;
        padding: 6px;
        /deep/.van-grid-item__content{
           background-color: #f4f5f6;
           .van-grid-item__text, .text{
               font-size: 28px/2;
               color: #222;
               margin-top: 0;
           }
           .van-grid-item__icon-wrapper {
                position: unset;
            }
           .active{
               color: #f85959;
           }
        }
    }
    /deep/.my-grid{
        .grid-item{
            .van-icon-clear{
                position: absolute;
                right: -5px;
                top: -5px;
                font-size: 12px;
                color: #cacaca;
                z-index: 2;
            }
        }
    }
    /deep/.recommend-grid{
        .grid-item{
            .van-grid-item__content{
                white-space: nowrap;
                flex-direction: row;
                .van-icon-plus{
                    font-size: 24px/2;
                }
            }
        }
            }
}
</style>
